<template>
  <div id="app">
    <div class="container">
      <div class="header" style="background:linear-gradient(35deg, #165DFF ,#628cfd);">
        <h1>{{sysName}}居民死亡医学证明（推断）书</h1>
      </div>
      <div class="search-actions">
        <div class="search-container">
          <input id="searchInput" v-model="patientTxt" type="text" class="search-input" placeholder="输入身份证号或住院证号">
          <button class="search-btn" @click="orlPatient">检索</button>
        </div>
        <p class="hint">
          <i class="fas fa-info-circle" /> 提示：请输入完整的证件号码进行精确查询
        </p>
        <div v-if="patientInfo.PATIENT_NO" class="examples">
          <b>查询结果</b>
          <p>
            <i>患者姓名：{{ patientInfo.deceasedName }}</i>
            <i>身份证号：{{ patientInfo.idNumber }}</i>
            <i>住院证号：{{ patientInfo.PATIENT_NO }}</i>
            <button style="border-radius: 100px; padding: 5px 10px; border:1px sandybrown solid; " @click="infoToForm">立即获取信息</button>
          </p>
        </div>
      </div>
      <div v-if="false" class="actions">
        <button class="action-btn print-btn" @click="toPage('list',{})">返回</button>
        <button class="action-btn reset-btn" @click="resetForm">重置表单</button>
        <button class="action-btn submit-btn" @click="savePrint">保存并打印</button>
        <button class="action-btn submit-btn" @click="add">保存</button>
      </div>

      <form ref="formV" class="form-container">
        <!-- 省市区信息 -->
        <div class="form-section print-page">
          <h3 class="section-title">行政区信息</h3>
          <div class="form-row">
            <div class="form-group">
              <label class="form-label">省（自治区、直辖市）</label>
              <input ref="el_province" v-model="formData.province" type="text" class="form-input">
            </div>
            <div class="form-group">
              <label class="form-label">市（地区、州、盟）</label>
              <input ref="el_city" v-model="formData.city" type="text" class="form-input">
            </div>
            <div class="form-group">
              <label class="form-label">县（区、旗）</label>
              <input ref="el_county" v-model="formData.county" type="text" class="form-input">
            </div>
          </div>

          <div class="form-row">
            <div class="form-group">
              <label class="form-label">行政区划代码</label>
              <input ref="el_regionCode" v-model="formData.regionCode" type="text" class="form-input">
            </div>
            <div class="form-group">
              <label class="form-label">编号</label>
              <input ref="el_certificateId" v-model="formData.certificateId" type="text" class="form-input" disabled placeholder="系统自动生成">
            </div>
          </div>
        </div>

        <div class="form-section print-page">
          <h3 class="section-title">死者基本信息</h3>
          <div class="form-row">
            <div class="form-group">
              <label class="form-label">死者姓名</label>
              <input ref="el_deceasedName" v-model="formData.deceasedName" type="text" class="form-input">
            </div>
            <div class="form-group">
              <label class="form-label">性别</label>
              <select ref="el_gender" v-model="formData.gender" class="form-select">
                <option value="">-- 请选择 --</option>
                <option value="男">男</option>
                <option value="女">女</option>
                <option value="未知的性别">未知的性别</option>
                <option value="未说明的性别">未说明的性别</option>
              </select>
            </div>
          </div>

          <div class="form-row">
            <div class="form-group">
              <label class="form-label">民族</label>
              <input ref="el_ethnicity" v-model="formData.ethnicity" type="text" class="form-input">
            </div>
            <div class="form-group">
              <label class="form-label">国家或地区</label>
              <input ref="el_country" v-model="formData.country" type="text" class="form-input">
            </div>
          </div>

          <div class="form-row">
            <div class="form-group">
              <label class="form-label">证件类别</label>
              <select ref="el_idType" v-model="formData.idType" class="form-select">
                <option value="">-- 请选择 --</option>
                <option value="身份证">身份证</option>
                <option value="户口簿">户口簿</option>
                <option value="护照">护照</option>
                <option value="军官证">军官证</option>
                <option value="驾驶证">驾驶证</option>
                <option value="港澳通行证">港澳通行证</option>
                <option value="台湾通行证">台湾通行证</option>
                <option value="其他法定有效证件">其他法定有效证件</option>
              </select>
            </div>
            <div class="form-group">
              <label class="form-label">证件号码</label>
              <input ref="el_idNumber" v-model="formData.idNumber" type="text" class="form-input">
            </div>
          </div>

          <div class="form-row">
            <div class="form-group">
              <label class="form-label">年龄</label>
              <input ref="el_age" v-model="formData.age" type="text" class="form-input">
            </div>
            <div class="form-group">
              <label class="form-label">婚姻状况</label>
              <select ref="el_maritalStatus" v-model="formData.maritalStatus" class="form-select">
                <option value="">-- 请选择 --</option>
                <option value="未婚">未婚</option>
                <option value="已婚">已婚</option>
                <option value="丧偶">丧偶</option>
                <option value="离婚">离婚</option>
                <option value="未说明">未说明</option>
              </select>
            </div>
          </div>

          <div class="form-row">
            <div class="form-group">
              <label class="form-label">出生年月日</label>
              <input ref="el_birthDate" v-model="formData.birthDate" type="date" class="form-input">
            </div>
            <div class="form-group">
              <label class="form-label">文化程度</label>
              <select ref="el_education" v-model="formData.education" class="form-select">
                <option value="">-- 请选择 --</option>
                <option value="研究生">研究生</option>
                <option value="大学">大学</option>
                <option value="大专">大专</option>
                <option value="中专">中专</option>
                <option value="技校">技校</option>
                <option value="高中">高中</option>
                <option value="初中及以下">初中及以下</option>
              </select>
            </div>
          </div>

          <div class="form-row">
            <div class="form-group">
              <label class="form-label">个人身份</label>
              <select ref="el_occupation" v-model="formData.occupation" class="form-select">
                <option value="">-- 请选择 --</option>
                <option v-for="item in occupationCode" :key="item" :value="item">{{ item }}</option>

              </select>
            </div>
          </div>
        </div>

        <div class="form-section print-page">
          <div class="form-row">
            <div class="form-group">
              <label class="form-label">死亡日期</label>
              <input ref="el_deathDate" v-model="formData.deathDate" type="date" class="form-input">
            </div>
            <div class="form-group">
              <label class="form-label">死亡时间（时:分）</label>
              <input ref="el_deathTime" v-model="formData.deathTime" type="time" class="form-input">
            </div>
          </div>

          <div class="form-row">
            <div class="form-group">
              <label class="form-label">死亡地点</label>
              <select ref="el_deathLocation" v-model="formData.deathLocation" class="form-select">
                <option value="">-- 请选择 --</option>
                <option value="医疗卫生机构">医疗卫生机构</option>
                <option value="来院途中">来院途中</option>
                <option value="家中">家中</option>
                <option value="养老服务机构">养老服务机构</option>
                <option value="其他场所">其他场所</option>
                <option value="不详">不详</option>
              </select>
            </div>
            <div class="form-group">
              <label class="form-label">死亡时是否处于妊娠期或妊娠终止后42天内</label>
              <select ref="el_pregnancy" v-model="formData.pregnancy" class="form-select">
                <option value="">-- 请选择 --</option>
                <option value="是">是</option>
                <option value="否">否</option>
              </select>
            </div>
          </div>
        </div>

        <div class="form-section print-page">
          <div class="form-row">
            <div class="form-group-full">
              <label class="form-label">户籍地址</label>
              <input ref="el_registeredAddress" v-model="formData.registeredAddress" type="text" class="form-input">
            </div>
          </div>

          <div class="form-row">
            <div class="form-group-full">
              <label class="form-label">常住地址</label>
              <input ref="el_residentialAddress" v-model="formData.residentialAddress" type="text" class="form-input">
            </div>
          </div>

          <div class="form-row">
            <div class="form-group-full">
              <label class="form-label">生前工作单位</label>
              <input ref="el_workplace" v-model="formData.workplace" type="text" class="form-input">
            </div>
          </div>
        </div>

        <div class="form-section print-page">
          <div class="form-row">
            <div class="form-group">
              <label class="form-label">可联系的家属姓名</label>
              <input ref="el_familyName" v-model="formData.familyName" type="text" class="form-input">
            </div>
            <div class="form-group">
              <label class="form-label">联系电话</label>
              <input ref="el_familyPhone" v-model="formData.familyPhone" type="tel" class="form-input">
            </div>
          </div>

          <div class="form-row">
            <div class="form-group-full">
              <label class="form-label">家属住址或工作单位</label>
              <input ref="el_familyWorkplace" v-model="formData.familyWorkplace" type="text" class="form-input">
            </div>
          </div>
        </div>

        <div class="form-section print-page">
          <h3 class="section-title">致死的主要疾病诊断</h3>

          <!-- 三列表格布局 -->
          <table class="disease-table">
            <thead>
              <tr>
                <th width="20%">致死的主要疾病诊断</th>
                <th width="50%">疾病名称（勿填症状体征）</th>
                <th width="30%">发病至死亡大概间隔时间</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td class="disease-label">I.(a) 直接死亡原因</td>
                <td>
                  <input ref="el_causeA" v-model="formData.causeA" type="text" placeholder="输入疾病名称">
                </td>
                <td>
                  <input ref="el_illnessDurationA" v-model="formData.illnessDurationA" type="text">
                </td>
              </tr>
              <tr>
                <td class="disease-label">I.(b) 引起(a)的疾病或情况</td>
                <td>
                  <input ref="el_causeB" v-model="formData.causeB" type="text">
                </td>
                <td>
                  <input ref="el_illnessDurationB" v-model="formData.illnessDurationB" type="text">
                </td>
              </tr>
              <tr>
                <td class="disease-label">I.(c) 引起(b)的疾病或情况</td>
                <td>
                  <input ref="el_causeC" v-model="formData.causeC" type="text">
                </td>
                <td>
                  <input ref="el_illnessDurationC" v-model="formData.illnessDurationC" type="text">
                </td>
              </tr>
              <tr>
                <td class="disease-label">I.(d) 引起(c)的疾病或情况</td>
                <td>
                  <input ref="el_causeD" v-model="formData.causeD" type="text">
                </td>
                <td>
                  <input ref="el_illnessDurationD" v-model="formData.illnessDurationD" type="text">
                </td>
              </tr>
              <tr>
                <td class="disease-label">II. 其他疾病诊断（促进死亡，但与导致死亡无关的其他重要情况）</td>
                <td>
                  <input ref="el_otherDisease" v-model="formData.otherDisease" type="text" placeholder="输入其他疾病名称">
                </td>
                <td>
                  <input ref="el_otherDuration" v-model="formData.otherDuration" type="text">
                </td>
              </tr>
            </tbody>
          </table>

          <div class="form-row" style="margin-top: 20px;">
            <div class="form-group">
              <label class="form-label">生前主要疾病最高诊断单位</label>
              <select ref="el_diagnosisUnit" v-model="formData.diagnosisUnit" class="form-select">
                <option value="">-- 请选择 --</option>
                <option value="三级医院">三级医院</option>
                <option value="二级医院">二级医院</option>
                <option value="乡镇卫生院/社区卫生服务机构">乡镇卫生院/社区卫生服务机构</option>
                <option value="村卫生室">村卫生室</option>
                <option value="其他医疗卫生机构">其他医疗卫生机构</option>
                <option value="末就诊">末就诊</option>
              </select>
            </div>
            <div class="form-group">
              <label class="form-label">生前主要疾病最高诊断依据</label>
              <select ref="el_diagnosisBasis" v-model="formData.diagnosisBasis" class="form-select">
                <option value="">-- 请选择 --</option>
                <option value="尸检">尸检</option>
                <option value="病理">病理</option>
                <option value="手术">手术</option>
                <option value="临床+理化">临床+理化</option>
                <option value="临床">临床</option>
                <option value="死后推断">死后推断</option>
                <option value="不详">不详</option>
              </select>
            </div>
          </div>
        </div>

        <div class="form-section print-page">
          <div class="form-row">
            <div class="form-group">
              <label class="form-label">医师签名</label>
              <input ref="el_doctorSignature" v-model="formData.doctorSignature" type="text" class="form-input">
            </div>
            <div class="form-group">
              <label class="form-label">医疗卫生机构盖章</label>
              <input ref="el_institution" v-model="formData.institution" type="text" class="form-input" placeholder="（机构名称）">
            </div>
          </div>

          <div class="form-row">
            <div class="form-group">
              <label class="form-label">填表日期</label>
              <input ref="el_issueDate" v-model="formData.issueDate" type="date" class="form-input">
            </div>
          </div>
        </div>

        <div class="form-section print-page">
          <h3 class="section-title">死亡调查记录（由编码人员填写）</h3>
          <div class="form-row">
            <div class="form-group">
              <label class="form-label">根本死亡原因</label>
              <input ref="el_rootCause" v-model="formData.rootCause" type="text" class="form-input">
            </div>
            <div class="form-group">
              <label class="form-label">ICD编码</label>
              <input ref="el_icdCode" v-model="formData.icdCode" type="text" class="form-input">
            </div>
          </div>
          <template v-if="sysName.includes('长春')">
            <div class="form-row">
              <div class="form-group">
                <label class="form-label">死者生前病史及症状体症：</label>
                <textarea ref="el_medicalHistory" v-model="formData.medicalHistory" class="form-input" rows="4" />
              </div>
            </div>

            <div class="form-row">
              <div class="form-group">
                <label class="form-label">被调查者姓名</label>
                <input ref="el_investigatorName" v-model="formData.investigatorName" type="text" class="form-input">
              </div>
              <div class="form-group">
                <label class="form-label">与死者关系</label>
                <input ref="el_relationship" v-model="formData.relationship" type="text" class="form-input">
              </div>
            </div>

            <div class="form-row">
              <div class="form-group">
                <label class="form-label">联系电话</label>
                <input ref="el_investigatorPhone" v-model="formData.investigatorPhone" type="tel" class="form-input">
              </div>
              <div class="form-group">
                <label class="form-label">联系地址或工作单位</label>
                <input ref="el_investigatorAddress" v-model="formData.investigatorAddress" type="text" class="form-input">
              </div>
            </div>

            <div class="form-row">
              <div class="form-group-full">
                <label class="form-label">死因推断</label>
                <textarea ref="el_deathInference" v-model="formData.deathInference" class="form-input" rows="3" />
              </div>
            </div>

            <div class="form-row">
              <div class="form-group">
                <label class="form-label">调查者签名</label>
                <input ref="el_investigatorSignature" v-model="formData.investigatorSignature" type="text" class="form-input">
              </div>
              <div class="form-group">
                <label class="form-label">调查日期</label>
                <input ref="el_signatureDate" v-model="formData.signatureDate" type="date" class="form-input">
              </div>
            </div>
          </template>
          <div class="note-box">
            <p><strong>注：</strong></p>
            <p>① 此表填写范围为在家、养老服务机构。其他场所正常死亡者；</p>
            <p>② 被调查者应为死者近亲或知情人；</p>
            <p>③ 调查时应出具以下资料：该调查者有效身份证件，居住地派出所或村委会证明。死者身份证/或户口薄，生前病历文书。</p>
          </div>
        </div>
      </form>
      <div class="actions">
        <button class="action-btn" @click="toPage('list',{})">返回
        </button>
        <!-- <button class="action-btn reset-btn" @click="resetForm">
                    <i class="fas fa-redo-alt"></i> 重置表单
                </button> -->
        <button class="action-btn submit-btn" @click="add">保存
        </button>
        <button class="action-btn  print-btn" @click="savePrint">预览并打印
        </button>
      </div>
      <div class="footer">
        <p>{{ footnote }}</p>
      </div>
    </div>
  </div>

</template>
    <style scoped>
        /* 原有样式保留，只添加了提交按钮样式 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Microsoft YaHei', 'Segoe UI', sans-serif;
        }

        body {
            background: linear-gradient(135deg, #e6f2ff, #f0f7ff);
            color: #333;
            padding: 10px 0;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .container {
            width: 100%;
            max-width: 1200px;
            margin: 0px auto;
            background: white;
            border-radius: 16px;
            box-shadow: 0 10px 35px rgba(0, 87, 158, 0.15);
            overflow: hidden;
            position: relative;
        }
        /* 头部样式 */
        .header {
            background: linear-gradient(35deg, #165DFF ,#628cfd);
            color: white;
            padding: 15px 40px;
            text-align: center;
            position: relative;
        }

        .header h1 {
            font-size: 32px;
            font-weight: 500;
            letter-spacing: 1px;
            margin-bottom: 15px;
            text-shadow: 0 2px 4px rgba(0,0,0,0.2);
        }

        /** 添加 */
        p{
            display: block;
            margin-block-start: 1em;
            margin-block-end: 1em;
            margin-inline-start: 0px;
            margin-inline-end: 0px;
            unicode-bidi: isolate;
            }
        .search-actions{
			    justify-content: center;
			    gap: 20px;
			    padding: 20px;
			    background: #f9fbfd;
			    border-bottom: 1px solid #eaeaea;
			}

		.search-container {
            position: relative;
            margin-bottom: 25px;
        }

        .search-input {
            width: 100%;
            padding: 18px 70px 18px 20px;
            border: 2px solid #e0f0f5;
            border-radius: 12px;
            font-size: 16px;
            transition: all 0.3s ease;
            outline: none;
            background-color: #f8fbfd;
            color: #1a5785;
            font-weight: 500;
            box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.05);
        }

        .search-input:focus {
            border-color: #2c9ab7;
            box-shadow: 0 0 0 3px rgba(44, 154, 183, 0.2),
                        inset 0 2px 5px rgba(0, 0, 0, 0.05);
        }

        .search-btn {
            position: absolute;
            right: 6px;
            top: 50%;
            transform: translateY(-50%);
            background: linear-gradient(to right, #2c9ab7, #1a5785);
            color: white;
            border: none;
            border-radius: 10px;
            padding: 12px 24px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 4px 8px rgba(26, 87, 133, 0.3);
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .search-btn:hover {
            background: linear-gradient(to right, #1a5785, #2c9ab7);
            transform: translateY(-50%) scale(1.03);
            box-shadow: 0 6px 12px rgba(26, 87, 133, 0.4);
        }

        .search-btn:active {
            transform: translateY(-50%) scale(0.98);
        }
        .hint {
            color: #5a7c8c;
            font-size: 14px;
            margin-top: 10px;
            text-align: left;
            padding-left: 5px;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .examples {
            background: #e8f4f8;
            border-radius: 12px;
            padding: 20px;
            margin-top: 30px;
            text-align: left;
        }

        .examples h3 {
            color: #1a5785;
            margin-bottom: 12px;
            font-size: 18px;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .examples ul {
            list-style-type: none;
            padding-left: 5px;
        }

        .examples li {
            padding: 8px 0;
            color: #5a7c8c;
            display: flex;
            align-items: center;
            gap: 10px;
            border-bottom: 1px dashed #c1dbe5;
        }

        .examples li:last-child {
            border-bottom: none;
        }

        .examples li i {
            color: #2c9ab7;
            font-size: 14px;
        }
        .search-container {
		            position: relative;
		            margin-bottom: 10px;
		        }

		        .search-input {
		            width: 100%;
		            padding: 18px 70px 18px 20px;
		            border: 2px solid #e0f0f5;
		            border-radius: 12px;
		            font-size: 16px;
		            transition: all 0.3s ease;
		            outline: none;
		            background-color: #f8fbfd;
		            color: #1a5785;
		            font-weight: 500;
		            box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.05);
		        }

		        .search-input:focus {
		            border-color: #2c9ab7;
		            box-shadow: 0 0 0 3px rgba(44, 154, 183, 0.2),
		                        inset 0 2px 5px rgba(0, 0, 0, 0.05);
		        }

		        .search-btn {
		            position: absolute;
		            right: 6px;
		            top: 50%;
		            transform: translateY(-50%);
		            background: linear-gradient(135deg, #607d8b, #455a64);
		            color: white;
		            border: none;
		            border-radius: 100px;
		            padding: 12px 24px;
		            font-size: 16px;
		            font-weight: 600;
		            cursor: pointer;
		            transition: all 0.3s ease;
		            box-shadow: 0 4px 8px rgba(26, 87, 133, 0.3);
		            display: flex;
		            align-items: center;
		            gap: 8px;
		        }

		        .search-btn:hover {
		            background: linear-gradient(to right, #1a5785, #2c9ab7);
		            transform: translateY(-50%) scale(1.03);
		            box-shadow: 0 6px 12px rgba(26, 87, 133, 0.4);
		        }

		        .search-btn:active {
		            transform: translateY(-50%) scale(0.98);
		        }

		        .hint {
		            color: #5a7c8c;
		            font-size: 14px;
		            margin-top: 10px;
		            text-align: left;
		            padding-left: 5px;
		            display: flex;
		            align-items: center;
		            gap: 8px;
		        }

		        .examples {
		            background: #e8f4f8;
		            border-radius: 12px;
		            padding: 20px;
		            margin-top: 0px;
		            text-align: left;
		        }

		        .examples h3 {
		            color: #1a5785;
		            margin-bottom: 12px;
		            font-size: 18px;
		            display: flex;
		            align-items: center;
		            gap: 8px;
		        }

		        .examples ul {
		            list-style-type: none;
		            padding-left: 5px;
		        }

		        .examples li {
		            padding: 8px 0;
		            color: #5a7c8c;
		            display: flex;
		            align-items: center;
		            gap: 10px;
		            border-bottom: 1px dashed #c1dbe5;
		        }

		        .examples li:last-child {
		            border-bottom: none;
		        }

		        .examples i {
		            color: #2c9ab7;
		            font-size: 14px;
					margin:0 20px 0 10px;
					font-style: normal;
		        }
        /* 头部样式 */
        .header {
            background: linear-gradient(135deg, #1a6fc4, #0d47a1);
            color: white;
            padding: 25px 40px;
            text-align: center;
            position: relative;
        }

        .header h1 {
            font-size: 32px;
            font-weight: 500;
            letter-spacing: 1px;
            margin-bottom: 15px;
            text-shadow: 0 2px 4px rgba(0,0,0,0.2);
        }

        .actions {
            display: flex;
            justify-content: center;
            gap: 20px;
            padding: 20px;
            background: #f9fbfd;
            border-bottom: 1px solid #eaeaea;
        }

        .action-btn {
            padding: 12px 30px;
            border: none;
            border-radius: 30px;
            font-weight: 500;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 8px;
            transition: all 0.3s ease;
            font-size: 16px;
            box-shadow: 0 4px 10px rgba(0,0,0,0.1);
        }

        .print-btn {
            background: linear-gradient(135deg, #ff9800, #f57c00);
            color: white;
        }

        .reset-btn {
            background: linear-gradient(135deg, #607d8b, #455a64);
            color: white;
        }

        .submit-btn {
            background: linear-gradient(135deg, #28a745, #218838);
            color: white;
        }

        .action-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
        }

        /* 表单区域 */
        .form-container {
            padding: 30px 40px;
        }

        .form-section {
            margin-bottom: 20px;
        }

        .section-title {
            color: #0d47a1;
            font-size: 20px;
            font-weight: 600;
            margin-bottom: 20px;
            padding-left: 10px;
            border-left: 4px solid #1a6fc4;
        }

        .form-row {
            display: flex;
            flex-wrap: wrap;
            margin: 0 -10px 15px;
        }

        .form-group {
            padding: 0 10px;
            margin-bottom: 15px;
            flex: 1 1 300px;
        }

        .form-group-full {
            flex: 1 1 100%;
        }

        .form-label {
            display: block;
            margin-bottom: 8px;
            font-weight: 500;
            color: #0d47a1;
            font-size: 15px;
        }

        .form-input, .form-select {
            width: 100%;
            padding: 12px 15px;
            border: 1px solid #bbdefb;
            border-radius: 6px;
            font-size: 15px;
            transition: all 0.3s ease;
            background-color: white;
        }

        .form-input:focus, .form-select:focus {
            outline: none;
            border-color: #1a6fc4;
            box-shadow: 0 0 0 3px rgba(26, 111, 196, 0.2);
        }

        /* 新的三列表格样式 */
        .disease-table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
            border: 1px solid #bbdefb;
            border-radius: 8px;
            overflow: hidden;
        }

        .disease-table th {
            background: #e3f2fd;
            color: #0d47a1;
            font-weight: 600;
            text-align: left;
            padding: 14px 15px;
            border-bottom: 2px solid #bbdefb;
        }

        .disease-table td {
            padding: 12px 15px;
            border-bottom: 1px solid #eaeaea;
            background: white;
        }

        .disease-table tr:last-child td {
            border-bottom: none;
        }

        .disease-table .disease-label {
            font-weight: 500;
            color: #0d47a1;
            white-space: nowrap;
        }

        .disease-table input {
            width: 100%;
            padding: 10px 12px;
            border: 1px solid #e0e0e0;
            border-radius: 4px;
            font-size: 14px;
        }

        .disease-table input:focus {
            outline: none;
            border-color: #1a6fc4;
            box-shadow: 0 0 0 2px rgba(26, 111, 196, 0.2);
        }

        .signature-area {
            display: flex;
            justify-content: space-between;
            margin-top: 30px;
            flex-wrap: wrap;
            gap: 20px;
        }

        .signature-box {
            flex: 1;
            min-width: 280px;
            padding: 20px;
            border: 1px solid #bbdefb;
            border-radius: 8px;
            background: #f9fbfd;
            text-align: center;
        }

        .signature-title {
            color: #0d47a1;
            margin-bottom: 15px;
            font-weight: 600;
            font-size: 18px;
        }

        .signature-line {
            height: 1px;
            background: #bbdefb;
            margin: 40px 0;
            position: relative;
        }

        .signature-line::after {
            content: '签名';
            position: absolute;
            bottom: -30px;
            left: 10px;
            color: #666;
            font-size: 14px;
        }

        .signature-date {
            display: flex;
            justify-content: space-between;
            margin-top: 20px;
        }

        .date-item {
            flex: 1;
            text-align: center;
        }

        .date-label {
            color: #666;
            font-size: 14px;
            margin-bottom: 5px;
        }

        .date-value {
            font-weight: 500;
            color: #333;
        }

        .note-box {
            background: #fff8e1;
            border-left: 4px solid #ffc107;
            padding: 15px;
            margin-top: 20px;
            font-size: 14px;
            color: #5d4037;
            border-radius: 0 6px 6px 0;
            line-height: 1.6;
        }

        .footer {
            text-align: center;
            padding: 20px;
            color: #666;
            font-size: 14px;
            border-top: 1px solid #eaeaea;
            background: #f9fbfd;
            width: 100%;
        }

        /* 美化选择框 */
        .form-select {
            appearance: none;
            background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a6fc4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
            background-repeat: no-repeat;
            background-position: right 15px center;
            background-size: 16px;
            padding-right: 40px;
        }

        /* 打印样式 */
        @media print {
            body, html {
                background: white !important;
                margin: 0;
                padding: 0;
            }

            .container {
                width: 210mm;
                height: 297mm;
                box-shadow: none;
                border-radius: 0;
                margin: 0;
                padding: 0;
                overflow: visible;
            }

            .actions, .footer {
                display: none;
            }

            .header {
                padding: 20px 30px;
            }

            .form-container {
                padding: 20px 30px;
            }

            .form-section {
                margin-bottom: 20px;
                padding-bottom: 15px;
            }

            .section-title {
                font-size: 18px;
            }

            .form-input, .form-select {
                border: none;
                border-bottom: 1px solid #ccc;
                border-radius: 0;
                padding: 8px 0;
                background: transparent;
                box-shadow: none !important;
            }

            .form-select {
                background-image: none;
                padding-right: 0;
            }

            .disease-table {
                border: 1px solid #ddd;
            }

            .disease-table th {
                background: #f0f0f0;
            }

            .disease-table input {
                border: none;
                border-bottom: 1px solid #ccc;
                border-radius: 0;
                padding: 6px 0;
                background: transparent;
            }

            .signature-box {
                border: 1px solid #999;
            }

            .signature-line {
                background: #999;
            }

            .note-box {
                border-left: 3px solid #ffc107;
            }

            /* 避免打印时出现分页中断 */
            .print-page {
                page-break-inside: avoid;
            }
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
            .header {
                padding: 20px 15px;
            }

            .header h1 {
                font-size: 26px;
            }

            .form-container {
                padding: 20px;
            }

            .form-group {
                flex: 1 1 100%;
            }

            .signature-area {
                flex-direction: column;
            }

            .actions {
                flex-direction: column;
                gap: 10px;
            }

            .disease-table {
                display: block;
                overflow-x: auto;
            }
        }
    </style>

<script>
import * as proofApi from '@/api/deathProof'
export default {
  name: 'Add',
  data() {
    return {
      formData: {
        // 行政区信息
        province: '河南省',
        city: '洛阳市',
        county: '涧西区',
        regionCode: '410305',
        certificateId: '',

        // 死者基本信息
        deceasedName: '',
        gender: '',
        ethnicity: '',
        country: '中国',
        idType: '身份证',
        idNumber: '',
        age: '',
        maritalStatus: '',
        birthDate: '',
        education: '',
        occupation: '',

        // 死亡信息
        deathDate: '',
        deathTime: '',
        deathLocation: '',
        pregnancy: '',

        // 地址信息
        registeredAddress: '',
        residentialAddress: '',
        workplace: '',

        // 家属信息
        familyName: '',
        familyPhone: '',
        familyWorkplace: '',

        // 疾病诊断
        causeA: '',
        causeB: '',
        causeC: '',
        causeD: '',
        illnessDurationA: '',
        illnessDurationB: '',
        illnessDurationC: '',
        illnessDurationD: '',
        otherDisease: '',
        otherDuration: '',
        diagnosisUnit: '',
        diagnosisBasis: '',

        // 医生签名
        doctorSignature: '',
        institution: '',
        issueDate: new Date().toISOString().split('T')[0],

        // 死亡调查记录
        rootCause: '',
        icdCode: '',
        medicalHistory: '',
        investigatorName: '',
        relationship: '',
        investigatorPhone: '',
        investigatorAddress: '',
        deathInference: '',
        investigatorSignature: '',
        signatureDate: new Date().toISOString().split('T')[0]
      },

      patientInfo: {},
      patientTxt: null,
      ethnicityCode: { '01': '汉族', '02': '蒙古族', '03': '回族', '04': '藏族', '05': '维吾尔族', '06': '苗族', '07': '彝族', '08': '壮族', '09': '布依族' },
      maritalStatusCode: { '1': '未婚', '2': '已婚', '3': '丧偶', '4': '离婚', '5': '其他' },
      occupationCode: { '37': '现役军人', '51': '自由职业者', '24': '工人', '27': '农民', '17': '职员', '70': '无业人员', '21': '企业管理人员', '90': '其他人员', '11': '国家公务员', ' 54': '个体经营者', '13': '专业技术人员', '31': '学生', '80': '退（离）休人员' },
      domePatient: {
        'PI_DAYS': 14,
        'HOUSE_DOC_NAME': '周淑珍',
        'LEAVE_TYPE': '1',
        'HENANADD2012': '||||034-7-4-202|||1||||000035|1||0||0|0|0|0|0|0|7|2|||||CAS|',
        'II_NUS': 0,
        'CHIEF_DOC_NAME': '金栋叶',
        'NURSECELL_NAME': '内一科护士站',
        'BIRTHDAY': '1938-08-14T21:30:59.000+08:00',
        'DEAD_DATE': '0001-01-01T00:00:00.000+08:00',
        'DISEASE30_FLAG': '0',
        'BLOOD_CODE': '6',
        'WORK_NAME': '034-7-4-202',
        'HIV_AB': '0',
        'INPATIENT_NO': 'ZY010000000421',
        'DEPT_CODE': '2001',
        'CE_PI': '1',
        'BRAIN_INJURY_PRE': '0天0时0分',
        'MR_QUAL': '01',
        'ZG': '2',
        'DEPT_CHIEF_DONM': '金栋叶',
        'OPER_DATE': '2013-09-10T09:17:26.000+08:00',
        'REACTION_BLOOD': '1',
        'CLINIC_DOCD': '000040',
        'III_NUS': 0,
        'OUTNURSECELL_CODE': '9001',
        'SALV_TIMES': 0,
        'VISI_STAT': '0',
        'I_NUS': 0,
        'PROF_CODE': '80',
        'INFECTION_NUM': 0,
        'OUTNURSECELL_NAME': '内一科护士站',
        'RH_BLOOD': '4',
        'CL_PA': '0',
        'PATIENT_NO': '0000000421',
        'DIAG_DATE': '0001-01-01T00:00:00.000+08:00',
        'CHARGE_DOC_NAME': '周淑珍',
        'MR_TIMES': 0,
        'QC_NUNM': '金春玲',
        'YN_FIRST': '0',
        'CHECK_DATE': '2013-08-28T08:00:00.000+08:00',
        'PACT_CODE': '7',
        'BLOOD_OTHER': '0',
        'HBSAG': '0',
        'BLOOD_WHOLE': '0',
        'X_TIMES': 0,
        'HOS_CODE': '78623668-X',
        'SUCC_TIMES': 0,
        'CT_TIMES': 0,
        'DEPT_INCD': '2001',
        'LINKMAN_ADD': '034-7-4-202',
        'PI_PO': '1',
        'HCV_AB': '0',
        'IN_DATE': '2013-08-14T21:00:00.000+08:00',
        'RES_NURS': '000035',
        'NATION_CODE': '01',
        'PET_TIMES': 0,
        'OPB_OPA': '0',
        'LEND_STUS': 'I',
        'HOME_ADD': '034-7-4-202',
        'CLINIC_DONM': '周淑珍',
        'NURSECELL_CODE': '9001',
        'TECH_SERC': '0',
        'MAIN_DIAGICDNAME': '脑梗死',
        'MAIN_DIAGSTATE': '1',
        'COUN_CODE': '1',
        'NAME': '刘小花',
        'CASE_STUS': '3',
        'IDENNO': '410305391110002',
        'CLINIC_DIAGICDNAME': '脑梗死',
        'CURRENT_ADDRESS': '034-7-4-202',
        'IN_TIMES': 1,
        'SPECAL_NUS': 0,
        'CHIEF_DOC_CODE': '000034',
        'VISI_PERIWEEK': '0',
        'DSA_TIMES': 0,
        'IN_WAY': '2',
        'HOUSE_DOC_CODE': '000040',
        'OUT_DATE': '2013-08-28T08:00:00.000+08:00',
        'REACTION_LIQUID': '1',
        'DEPT_NAME': '内一科',
        'AGE_UNIT': '岁',
        'MEDICAL_TYPE': 'A',
        'IN_CIRCS': '3',
        'BLOOD_PLATELET': '0',
        'BODY_ANOTOMIZE': '0',
        'VISI_PERIMONTH': '0',
        'BLOOD_PLASMA': '0',
        'BLOOD_RED': '0',
        'MAIN_DIAGICD': 'I63.900',
        'SEX_CODE': 'F',
        'OUTCON_NUM': 0,
        'ECT_TIMES': 0,
        'PAYKIND_CODE': '7',
        'DEPT_INNM': '内一科',
        'SUPER_NUS': 0,
        'AGE': 75,
        'PROJ_AFTER_31DAYS': '1',
        'INCON_NUM': 0,
        'MARI': '2',
        'VISI_PERI': '0001-01-01T00:00:00.000+08:00',
        'CLINIC_DIAGICD': 'I63.900',
        'COUT_DATE': '0001-01-01T00:00:00.000+08:00',
        'OPER_CODE': '000016',
        'CASE_NO': '0000000421',
        'VISI_PERIYEAR': '0',
        'OPERATION_DATE': '0001-01-01T00:00:00.000+08:00',
        'DIAG_DAYS': 0,
        'BRAIN_INJURY_AFT': '0天0时0分',
        'DEPT_CHIEF_DOCD': '000034',
        'STRICTNESS_NUS': 0,
        'QC_NUCD': '000016',
        'FS_BL': '0',
        'CHARGE_DOC_CODE': '000040'
      }
    }
  },
  mounted() {
    if (this.$route.query.id) {
      proofApi.get(this.$route.query.id).then(p => {
        this.formData = p.data
      })
    } else {
      const ustr = sessionStorage.getItem('userInfo')
      if (ustr) { this.formData.doctorSignature = JSON.parse(ustr)?.user?.nickName }
    }
  },
  methods: {
    infoToForm() {
      this.formData = Object.assign(this.formData, this.patientInfo)
    },
    orlPatient() {
      if (process.env.NODE_ENV === 'development' && this.patientTxt === '0') {
        this.patientInfo = this.patientToProofMap(this.domePatient)
      } else if (this.patientTxt) {
        proofApi.orlPatient({ patientNo: this.patientTxt }).then(p => {
          if (p.data.length) { this.patientInfo = this.patientToProofMap(p.data[0]) }
        })
      }
    },
    patientToProofMap(pat) {
      const map = {
        PATIENT_NO: 'PATIENT_NO',
        deceasedName: 'NAME',
        gender: 'SEX_CODE',
        ethnicity: 'NATION_CODE', // 汉
        // country: '中国',
        // idType: '身份证',
        idNumber: 'IDENNO',
        age: 'AGE',
        maritalStatus: 'MARI',
        birthDate: 'BIRTHDAY',
        // education: '高中',
        occupation: 'PROF_CODE', // '退休工人',
        // deathDate: '2025-06-15',
        // deathTime: '14:30',
        // deathLocation: '家中',
        // pregnancy: '否',
        registeredAddress: 'DISTRICT', // 'HOMEPLACE',
        residentialAddress: 'HOME_ADD',
        workplace: 'WORK_NAME',
        familyName: 'LINKMA_NAME',
        familyPhone: 'LINKMAN_TEL',
        familyWorkplace: 'LINKMAN_ADD'
      }
      const newMap = {}
      for (const k in map) {
        const val = map[k]
        if (pat[val]) { newMap[k] = pat[val] }
      }
      if (newMap.birthDate) { newMap.birthDate = this.formatDate(newMap.birthDate) }
      if (newMap.gender) { newMap.gender = newMap.gender == 'F' ? '女' : '男' }
      if (newMap.ethnicity) { newMap.ethnicity = this.ethnicityCode[newMap.ethnicity] }
      if (newMap.maritalStatus) { newMap.maritalStatus = this.maritalStatusCode[newMap.maritalStatus] }
      if (newMap.occupation) { newMap.occupation = this.occupationCode[newMap.occupation] }
      console.log('整理数据：', newMap)
      return newMap
    },
    formatDate(date) {
      if (typeof (date) === 'string') { date = new Date(date) }
      const year = date.getFullYear()
      const month = ('0' + (date.getMonth() + 1)).slice(-2)
      const day = ('0' + date.getDate()).slice(-2)
      return `${year}-${month}-${day}`
    },
    toPage(path, query) {
      this.$router.push({
        path: path,
        query: query
      })
    },
    // 重置表单
    resetForm() {
      const formKeys = Object.keys(this.formData)
      formKeys.forEach(key => {
        this.formData[key] = ''
      })
      this.formData.issueDate = new Date().toISOString().split('T')[0]
      this.formData.signatureDate = new Date().toISOString().split('T')[0]

      const btn = document.querySelector('.reset-btn')
      btn.innerHTML = '<i class="fas fa-check"></i> 已重置'
      setTimeout(() => {
        btn.innerHTML = '<i class="fas fa-redo-alt"></i> 重置表单'
      }, 2000)
    },
    validForm() {
      if (!this.$refs.formV.checkValidity()) {
        alert('必填')
        return false
      }
      const requiredFields = ['deceasedName'
        // 'province', 'city', 'county',  'gender',
        // 'deathDate', 'deathLocation', 'doctorSignature','birthDate','causeA',
        // 'icdCode','rootCause','idNumber'
      ]

      let isValid = true
      console.log('===>', requiredFields)
      requiredFields.forEach(field => {
        if (!this.formData[field]) {
          const element = this.$refs[`el_${field}`] // document.querySelector(`[v-model="formData.${field}"]`);
          if (element) {
            element.style.borderColor = '#f44336'
            console.log('必填字段：' + field)
            isValid = false
          }
        }
      })

      if (!isValid) {
        alert('请填写所有必填字段（标红字段）！')
        return false
      }
      return true
    },
    // 打印表单
    printForm() {
      if (this.validForm()) { window.print() }
    },
    save(isPrint) {
      if (isPrint === 1 && !this.validForm()) { return }
      if (isPrint === 1) { this.formData.status = 1 }
      if (this.formData.id) {
        let fdataId=this.formData.id
        proofApi.update(this.formData).then(p => {
          if (p.code == 200) {
          if(isPrint !== 1)
            alert('已保存')
            
            if (isPrint === 1) { this.toPage('print1', { id: fdataId }) } else { this.toPage('list', {}) }
          } else { alert(p.message) }
        })
      } else {
        proofApi.add(this.formData).then(p => {
          if (p.code == 200) {
            if(isPrint !== 1)
            alert('保存成功')
            this.formData = p
            
            if (isPrint === 1) { this.toPage('print1', { id: p.data.id }) } else { this.toPage('list', {}) }
          } else { alert(p.message) }
        })
      }
    },
    add() {
      this.save(0)
    },
    savePrint() {
      this.save(1)
    },
    // 填充示例数据
    fillSampleData() {
      this.formData = {
        province: '湖南省',
        city: '长沙市',
        county: '芙蓉区',
        regionCode: '430102',
        certificateId: '20250620001',
        deceasedName: '张三',
        gender: '男',
        ethnicity: '汉族',
        country: '中国',
        idType: '身份证',
        idNumber: '43010219800101001X',
        age: '75',
        maritalStatus: '已婚',
        birthDate: '1950-01-01',
        education: '高中',
        occupation: '退休工人',
        deathDate: '2025-06-15',
        deathTime: '14:30',
        deathLocation: '家中',
        pregnancy: '否',
        registeredAddress: '湖南省长沙市芙蓉区解放路100号',
        residentialAddress: '湖南省长沙市芙蓉区解放路100号',
        workplace: '长沙机械厂（已退休）',
        familyName: '张四',
        familyPhone: '13800138000',
        familyWorkplace: '长沙百货公司',
        causeA: '急性心肌梗死',
        causeB: '冠状动脉粥样硬化性心脏病',
        causeC: '高血压病',
        causeD: '动脉粥样硬化',
        illnessDurationA: '立即',
        illnessDurationB: '5年',
        illnessDurationC: '10年',
        illnessDurationD: '15年',
        otherDisease: '2型糖尿病',
        otherDuration: '15年',
        diagnosisBasis: '临床+理化',
        diagnosisUnit: '三级医院',
        doctorSignature: '李医生',
        institution: '长沙市第一人民医院',
        issueDate: '2025-06-16',
        rootCause: '冠状动脉粥样硬化性心脏病',
        icdCode: 'I25.1',
        medicalHistory: '患者有高血压病史15年，糖尿病史10年，冠心病史5年。近一周出现胸闷、气促症状，未及时就医。',
        investigatorName: '张四',
        relationship: '父子',
        investigatorPhone: '13800138000',
        investigatorAddress: '湖南省长沙市芙蓉区解放路100号',
        deathInference: '根据病史及症状，推断为心源性猝死。',
        investigatorSignature: '王调查员',
        signatureDate: '2025-06-17'
      }
    }
  }
}
</script>
